<template>
    <Dialog
        btn-content="编辑请求"
        v-model:visible="state.visible"
        confirm-btn-text="重放"
        @cancel="onDialogCancel"
        @confirm="onDialogConfirm"
    >
        <JsonEditor v-model="state.value" />
    </Dialog>
</template>

<script setup>
import { reactive, watch } from "vue";
import JsonEditor from "json-editor-vue";
import { Dialog } from "@/components/index.js";
import { useRequestStore } from "@/store/state/request-store.js";
import { parseParams, repaly } from "@/utils/request-util.js";

const requestStore = useRequestStore();
const state = reactive({
  visible: false,
  value: null,
});

watch(() => state.visible, (val) => {
  if(val) {
    state.value = parseParams(requestStore.currentRequest);
  }
});

const onDialogCancel = () => {
  state.visible = false;
};
const onDialogConfirm = () => {
  repaly(requestStore.currentRequest, state.value);
  state.visible = false;
};
</script>